<template>
	<view class="container-search">
		<input class="txt-search" :value="modelValue" placeholder="请输入......"
			placeholder-style="color:rgba(255,255,255,0.4)" @input="onInput" @confirm="onConfirmSearch" />
		<view class="wrap-search" @tap="onConfirmSearch">
			<image class="icon-search" src="/static/icon_seach.png"></image>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	const props=defineProps({
		modelValue:{
			type:String,
			default:''
		}
	})
	const emits = defineEmits(['update:modelValue', 'confirm'])
	const onInput = (evt) => {
		emits('update:modelValue', evt.detail.value)
	}
	const onConfirmSearch = () => {
		emits('confirm', props.modelValue.value)
	}

</script>

<style lang="less">
	.container-search {
		position: relative;
		width: 100%;
		height: 100%;
		background: #213343;
		border-radius: 40rpx;
		flex-shrink: 0;
		padding-left: 24rpx;
		padding-right: 12rpx;
		box-sizing: border-box;
		display: flex;
		display: -webkit-flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		.txt-search {
			position: relative;
			flex: 1;
			height: 100%;
			// line-height: 80rpx;
			vertical-align: middle;
			padding-right: 24rpx;
			font-size: 24rpx;
			// font-family: PingFang SC;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			box-sizing: border-box;
		}

		.wrap-search {
			position: relative;
			width: 48rpx;
			height: 48rpx;
			background: #FFFFFF;
			border-radius: 50%;

			.icon-search {
				position: absolute;
				width: 26rpx;
				height: 26rpx;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				-webkit-transform: translate(-50%, -50%);
			}
		}

	}
</style>